<template>
	<view class="tabs">
		<view class="tabs_title">
			<view :class="{title_item:true,'active':item.isActive}"
				v-for="(item,index) in tabs" :key="item.id" :data-index="index"
				@click="handleItemClick">
				{{item.value}}
			</view>
		</view>
		<view class="tabs_content">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			tabs:{
				type:Array,
				default(){
					return []
				}
			}
		},
		methods:{
			handleItemClick(e){
				const {index}=e.currentTarget.dataset;
				this.$emit('tabsItemChange',index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs_title{
		display: flex;
	}
	.title_item{
		display: flex;
		justify-content: center;
		align-items: center;
		flex:1;
		padding: 15rpx 0;
	}
	.active{
		color: $theme-color;
		border-bottom: 5rpx solid $theme-color;
	}
</style>
